<template>
  <div
    ref="mapContainer"
    id="mapContainer"
    style="width: 100vw; height: 100vh"></div>

  <activity-panel>
    <!-- <el-button @click="addLayer">添加图层</el-button> -->
    <el-button @click="removeLayer">移除图层</el-button>
  </activity-panel>
</template>

<script setup>
import { onMounted, nextTick, ref } from "vue";
import useInitMap from "@/utils/ol/useInitMap";
import { getLocalImage, getWeatherStationHeatMap } from "./layers";
import { getGroupById, removeLayerById } from "@/utils/ol/layer/helper";
import LayersManager from "@/utils/ol/controls/LayersManager";
// import Collection from "ol/collection";

import { Group as LayerGroup } from "ol/layer";

useInitMap({
  target: "mapContainer",
  zoom: 7,
  onLoadEnd: onLoadEnd,
});

function onLoadEnd(map) {
  // 添加本地图片图层
  const layers = [getLocalImage(), getWeatherStationHeatMap()];
  // layers.forEach(layer => {
  //   map.addLayer(layer);
  // });

  const layerGroup = new LayerGroup({
    layers: [getWeatherStationHeatMap()],
  });

  map.addLayer(layerGroup);

  const layerTree = [
    {
      id: "baseLayers",
      name: "基础地图",
      children: [
        {
          id: "tdt_vec",
          name: "天地图矢量",
        },
      ],
    },
    {
      id: "rainfall",
      name: "降雨图",
      group: true,
      children: [
        {
          id: "rainfall_1",
          name: "降雨图1",
        },
        {
          id: "rainfall_2",
          name: "降雨图2",
        },
      ],
    },
  ];

  // const layersManager = new LayersManager({});
  // layersManager.setMap(map);
  // layersManager.setTreeData(layerTree);
}

function addLayer() {
  const layer = getLocalImage();
  map.addLayer(layer);
}

function removeLayer() {
  removeLayerById(map, "rainfall_1");
  // window.map
  //   .getLayers()
  //   .getArray()
  //   .forEach(layer => {
  //     if (layer.get("id") === "rainfall") {
  //       layer.setLayers(new Collection([getWeatherStationHeatMap()]));
  //     }
  //   });
}
</script>
